<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的资料</title>
     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../css/aui.css">
     <link rel="stylesheet" href="../../css/common.css">
         <script type="text/javascript" src="../../script/api.js"></script>
    <script language="JavaScript" src="../../script/vue.js"></script>
     <script language="JavaScript" src="../../script/common.js"></script>
  <style>

      .user-logo{
          width: 3rem;
          height: 3rem;
       }
      .user-logo .avatar{
          border: 1px solid #ededed;
          width: 2rem;
          height: 2rem;
          vertical-align: middle;;
          border-radius: 100%;
      }
      .btn-item{
          text-align: center;
          background-color: #fff;
          line-height: 1.5rem;
          padding-top: 0.4rem;
      }
      .logoutbtn{
          color: #666;
          display: inline-block;
          padding: 0.1rem;
          margin: 0.2rem;
          background-color: #d9d9d9;
          border-radius: 0.2rem;

      }
      .baseinfo .aui-list-item-right{
          font-size: 0.8rem;
      }

  </style>
</head>
<body>
  <header class="aui-bar aui-bar-nav" id="header">
      <a class="aui-pull-left aui-btn" onclick="closewin();">
          <span class="aui-iconfont aui-icon-left"></span>
      </a>
      <div class="aui-title">基本信息</div>
  </header>
<div class="aui-content baseinfo" id="uinfo-box">
    <ul class="aui-list aui-list-in">

        <li class="aui-list-item">
            <div class="aui-list-item-inner ">
                <div class="aui-list-item-title">头像</div>
                <div class="aui-list-item-right user-logo">
                  <img onload="fnLoadImage(this)" :data-url="userinfo.logo_url" class="avatar"  src="../../image/default_user_logo.png" />
                 </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">用户名</div>
                <div class="aui-list-item-right">{{userinfo.username}}</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">昵称</div>
                <div class="aui-list-item-right">{{userinfo.nickname}}</div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="aui-list-item-inner">
                <div class="aui-list-item-title">性别</div>
                <div class="aui-list-item-right">{{sexarr[userinfo.sex]}}</div>
            </div>
        </li>


    </ul>
    <div class="btn-item" @click="logout"><span class="logoutbtn">退出登录</span></div>
</div>
<script language="javascript">


    var vm = new Vue({
        el: '#uinfo-box',
        data:{
           token:'',
            userinfo:{},
            sexarr:{
                0:"未知",
                1:'男',
                2:'女'
            }
        },
        methods:{
            logout:function () {
                 $api.rmStorage('token');
                 api.sendEvent({
                     name: 'logout',
                  });
                closewin();

            },
            load_init:function () {
                $page.get_data('/api/member/getinfo','post',{token:this.token},function (ret) {
                    if(ret.data.uid){
                        vm.userinfo = ret.data;
                     }
                });
            }

        }
    });
    apiready=function(){
      vm.token = $api.getStorage('token');
      vm.load_init();
    }

</script>

</body>
</html>
